<template>
  <div class="swipper">
    <ul class="imgList">
      <li :class="activeIndex === item.index ? 'imgList-item active' : 'imgList-item'" v-for="(item, index) in banners" :key="index"><img :src="item.img" alt=""></li>
    </ul>
    <ul class="pointList">
      <li :class="activeIndex === item.index ? 'point active' : 'point'" v-for="(item, index) in banners" :key="index" @click="goIndex(item.index)"></li>
    </ul>
    <button type="button" class="btn" id="goPre" @click="goPre"> &lt; </button>
    <button type="button" class="btn" id="goNext" @click="goNext"> &gt; </button>
  </div>
</template>

<script>
export default {
  name: "BannerSwipper",
  data () {
    return {
      time: 0, //小圆点图片定时器
      activeIndex: 0, //表示第几张图片在展示
      banners: [
        { index: 0, img: '/img/banner1.jpg' },
        { index: 1, img: '/img/banner3.jpg' },
        { index: 2, img: '/img/banner4.jpeg' },
      ],
    }
  },
  created() {
    //定时轮播
    setInterval(this.stopwatch, 100)
  },
  methods: {
    stopwatch() {
      this.time++;
      if (this.time >= 30) {
        this.goNext();
        this.time = 0;
      }
    },
    goIndex(idx) {
      this.activeIndex = idx
    },
    goNext() {
      if (this.activeIndex < this.banners.length - 1) {
        this.activeIndex++
      } else {
        this.activeIndex = 0
      }
    },
    goPre() {
      if (this.activeIndex === 0) {
        this.activeIndex === this.banners.length - 1
      } else {
        this.activeIndex--
      }
    },
  }
}
</script>